<template>
  <div class="channel-edit">
    <!-- 我的频道 -->
    <van-cell :border="false">
      <div slot="title" class="title-text">我的频道</div>
      <van-button
        class="edit-btn"
        size="mini"
        round
        type="danger"
        plain
        @click="isEdit = !isEdit"
        >{{ isEdit ? "完成" : "编辑" }}</van-button
      >
    </van-cell>

    <div
      class="box"
      v-for="(item, index) in mychannels"
      :key="item.id"
      @click="onMyChannelClick(item, index)"
    >
      <van-image
        class="box1"
        round
        fit="cover"
        width="50px"
        height="50px"
        :src="item.imgURL"
      />
      <van-icon
        name="clear"
        size="16"
        class="clear"
        v-show="isEdit && !fiexdChannels.includes(item.id)"
      ></van-icon>
      <div :class="{ activered: index === activeIndex }" class="box2">
        {{ item.name }}
      </div>
    </div>

    <!-- 推荐频道 -->
   <!--  <van-cell :border="false">
      <div slot="title" class="title-text">频道推荐</div>
    </van-cell>

    <div class="box" v-for="item in recommendChannele" :key="item.id">
      <van-image
        class="box1"
        round
        fit="cover"
        width="50px"
        height="50px"
        :src="item.imgURL"
      />
      <div class="ping">
        <div class="box2" @click="onAddChannel(item)">
          <van-icon name="plus" size="14" />&nbsp;{{ item.name }}
        </div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { getAllChannels } from '@/api/ping';
export default {
    name: 'ChannelEdit',
    props: {
        mychannels: {
            type: Array,
            required: true
        },
        activeIndex: {
            type: Number,
            required: true
        }
    },
    data() {
        return {
            allChannels: [], // 所有频道
            isEdit: false, // 控制编辑状态
            fiexdChannels: [1] // 不需要编辑、删除的频道
        };
    },
    created() {
        this.loadAllChannels();
    },
    methods: {
        async loadAllChannels() {
            try {
                const { data } = await getAllChannels();
                console.log(data);
                this.allChannels = data;
            } catch (err) {
                console.log(err);
            }
        },
        // 频道添加
        onAddChannel(channels) {
            this.mychannels.push(channels);
        },
        // 切换频道
        onMyChannelClick(item, index) {
            // 编辑状态，执行删除判断
            if (this.isEdit) {
                console.log(1);
                // 判断固定频道，则不删除
                if (this.fiexdChannels.includes(item.id)) {
                    return;
                }
                // 删除频道
                this.mychannels.splice(index, 1);
                // 要删除频道之前的频道，则更新激活的频道项
                if (index <= this.activeIndex) {
                    // 让激活的频道索引-1
                    this.$emit('update-active', this.activeIndex - 1);
                }
            } else {
                // 非编辑状态，指定切换高亮效果
                console.log(2);
                this.$emit('update-active', index, false);
            }
        }
    }
    // 所有频道 - 用户频道 = 推荐频道
    /*    computed: {
        recommendChannele() {
            const channels = [];
            this.allChannels.forEach((obj) => {
                const ret = this.mychannels.find((mychannels) => {
                    return mychannels.id === obj.id;
                });
                if (!ret) {
                    channels.push(obj);
                }
            });
            return channels;
        }
    } */
};
</script>

<style lang="scss" scoped>
.channel-edit {
  padding: 85px 0px;

  .title-text {
    font-size: 32px;
    color: #333;
    text-align: left;
    line-height: 50px;
  }
  .edit-btn {
    width: 104px;
    height: 48px;
    font-size: 26px;
    color: #ff9800;
    border: 1px solid #ff9800;
  }
  .box {
    width: 200px;
    height: 160px;
    background-color: #fff;
    float: left;
    padding: 10px 25px 0px 25px;
    .box2 {
      font-size: 30px;
      //   text-align: center;
      line-height: 20px;
    }
    .clear {
      position: relataive;
      top: -0.7rem;
      right: 0.34rem;
      color: #cacaca;
    }
  }
  .ping {
    vertical-align: middle;
  }
  .activered {
    color: #ff9800;
  }

}
</style>
